<template>
	<view>
		<view class="container" :style="{height: editorHeight+'px'}">
			<editor id="editor" class="ql-container" :placeholder="placeholder" @focus="showKeyboard=true"
				@blur="showKeyboard=false" @statuschange="onStatusChange" @ready="onEditorReady" @input="handleInput">
			</editor>
		</view>
		<view class="toolbar" @touchend="format" v-show="showKeyboard"
			:style="{bottom: isIOS ? keyboardHeight+'px' : '0px'}">
			<!-- <i class="iconfont icon-charutupian" @touchend="insertImage"></i> -->
			<i :class="['iconfont', 'icon-format-header-2', formats.header === 2 ? 'ql-active' : '']" data-name="header"
				:data-value="2"></i>
			<i :class="['iconfont', 'icon-format-header-3', formats.header === 3 ? 'ql-active' : '']" data-name="header"
				:data-value="3"></i>
			<i :class="['iconfont', 'icon-text_color', formats.color ? 'ql-active' : '']" data-name="color"
				data-value="#2865b8"></i>
			<i :class="['iconfont', 'icon-zitijiacu', formats.bold ? 'ql-active' : '']" data-name="bold"></i>
			<i :class="['iconfont', 'icon-zitixieti', formats.italic ? 'ql-active' : '']" data-name="italic"></i>
			<i :class="['iconfont', 'icon-zitixiahuaxian', formats.underline ? 'ql-active' : '']" data-name="underline"></i>
			<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
			<i :class="['iconfont', 'icon-youxupailie', formats.list === 'ordered' ? 'ql-active' : '']" data-name="list"
				data-value="ordered"></i>
			<i :class="['iconfont', 'icon-wuxupailie', formats.list === 'bullet' ? 'ql-active' : '']" data-name="list"
				data-value="bullet"></i>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-editor",
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				formats: {},
				readOnly: false,
				placeholder: '开始输入...',
				editorHeight: 130,
				keyboardHeight: 0,
				showKeyboard: false,
				isIOS: false,
				
				promise: null,
				resolveFn: ()=>{},
				editorCtx: null,
			};
		},
		onLoad() {
			const platform = uni.getSystemInfoSync().platform
			this.isIOS = platform === 'ios'
			const that = this;
			// this.updatePosition(0)
			let keyboardHeight = 0
			uni.onKeyboardHeightChange(res => {
				if (res.height === keyboardHeight) return
				const duration = res.height > 0 ? res.duration * 1000 : 0
				console.log("res", res)
				keyboardHeight = res.height
				// setTimeout(() => {
				// 	uni.pageScrollTo({
				// 		scrollTop: 0,
				// 		success() {
				// 			that.updatePosition(keyboardHeight)
				// 			that.editorCtx.scrollIntoView()
				// 		}
				// 	})
				// }, duration)

			})
		},
		watch: {
			value() {
				this.value&&this.editorCtx&&this.resolveFn()
			},
			editorCtx(){
				this.value&&this.editorCtx&&this.resolveFn()
			}
		},
		methods: {
			handleInput(e) {
				// this.value = e.detail.html;
				this.$emit('input', e.detail.html)
			},

			readOnlyChange() {
				this.readOnly = !readOnly;
			},
			updatePosition(keyboardHeight) {
				const toolbarHeight = 50
				const {
					windowHeight,
					platform
				} = uni.getSystemInfoSync()

				let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight;
				this.editorHeight = editorHeight;
				this.keyboardHeight = keyboardHeight;
			},
			calNavigationBarAndStatusBar() {
				const systemInfo = uni.getSystemInfoSync()
				const {
					statusBarHeight,
					platform
				} = systemInfo
				const isIOS = platform === 'ios'
				const navigationBarHeight = isIOS ? 44 : 48
				return statusBarHeight + navigationBarHeight
			},
			onEditorReady() {
				this.$nextTick(() => {
					const that = this;
					// console.log(uni.createSelectorQuery().select('#editor'))
					uni.createSelectorQuery()
						.in(this)
						.select("#editor")
						.context(res => {
							this.editorCtx = res?.context;
							this.promise = new Promise((resolve)=>{
								this.resolveFn = resolve
							})
							this.promise.then(()=>{
								this.promise = null;
								res.context.setContents({
									html: this.value
								})
							})
							

						}).exec()
				})
			},
			blur() {
				this.editorCtx.blur()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				this.editorCtx.format(name, value)

			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats;
				console.log(111, this.formats)
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				const that = this
				uni.chooseImage({
					count: 1,
					success: function(res) {
						that.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							data: {
								id: 'abcd',
								role: 'god'
							},
							width: '80%',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			}

		}
	}
</script>

<style>
	@import "./lib/weui.css";
	@import "./assets/iconfont.css";

	.container {
		/* position: absolute; */
		top: 0;
		left: 0;
		width: 100%;
		word-break: break-all
	}

	.ql-container {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		min-height: 100%;
		font-size: 29rpx;
		overflow: auto;
		padding: 10px 10px 20px 10px;
		border: 1px solid #ECECEC;
	}

	.ql-active {
		color: #22C704;
	}

	.iconfont {
		display: inline-block;
		width: 30px;
		height: 30px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		padding: 0 10px;
		height: 50px;
		width: 100%;
		position: fixed;
		left: 0;
		right: 100%;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ECECEC;
		border-left: none;
		border-right: none;
		z-index: 999;
		background-color: #fff;
	}
</style>